<template>
  <div class="natural">
    <MyHeader></MyHeader>
    <Form class="natural_person" label-position="left"  ref="form" :model="form">
      <FormItem label="姓名" :label-width="120" prop='inv' :rules="validator.chinese" >
        <Input v-model="form.inv" type="text" placeholder="请输入姓名" :maxlength="15" disabled></Input>
      </FormItem>
      <FormItem label="证件号码" :label-width="120" prop='cerno' :rules="validator.cerno" >
        <Input v-model="form.cerno" type="text" placeholder="请输入身份证号码"></Input>
      </FormItem>
      <FormItem class="dom" :label-width="120" label="户籍地址" prop='domother' :rules="validator.address" >
        <div class="selectDiv" id="trigger3" v-if="!form.domprov">省/市/县</div>
        <div class="selectDiv" id="trigger3" v-if="form.domprov" >{{dom0}}</div>
        <Input v-model="form.domother" type="text" placeholder="街道/小区/室" :maxlength="30"></Input>
      </FormItem>
      <FormItem label="民族" :label-width="120" prop='nation' :rules="validator.must" >
        <!-- <Select v-model="form.nation">
          <Option v-for="(item,index) in nations" :value="item.value" :key="index">{{item.text}}</Option>
        </Select> -->
          <div class="selectDiv" id="trigger4" v-if="!form.nation">选择民族</div>
        <div class="selectDiv" id="trigger4" v-if="form.nation">{{form.nation | dict('CB32')}}</div>
      </FormItem>
      <div class="natural_space"></div>
    </Form>
      <Form class="natural_person" label-position="left"   ref="stagespay" :model="stagespay">
      <Row>出资情况</Row>
      <FormItem label="出资方式" :label-width="100" prop='conForm'>
        <div class="selectDiv" id="trigger5" v-if="!stagespay.conform">选择出资方式</div>
        <div class="selectDiv" id="trigger5" v-if="stagespay.conform">{{stagespay.conform | dict('CA22')}}</div>
      </FormItem>
      <FormItem class="conam" label="出资金额" :label-width="100" prop='cursubconam' :rules="validator.money" >
        <Input v-model="stagespay.cursubconam" type="text" placeholder="请输入出资金额" :maxlength="18"></Input>
        <span>万元</span>
      </FormItem>
      <FormItem label="出资时间" :label-width="100" >
        <DatePicker v-model="stagespay.condate" type="date" :options="options3" placeholder="请选择出资时间" ></DatePicker>
      </FormItem>
      <div class="natural_add">
        <Button type="primary" @click="add('stagespay')">增加出资项</Button>
      </div>
      <div v-for="(item, index) in stagespayList" :key="index" class="natural_fund">
        <div>
          <p>
            <span>{{item.conform | dict('CA22')}}</span>
            <em>{{item.cursubconam}}万元</em>
          </p>
          <p>{{item.condate}}</p>
        </div>
        <Button type="error" @click="del(index)">删除</Button>
      </div>
    </Form>
     <div class="bottom">
    <Button type="primary" @click="save('form')">保存</Button>
    <Button type="warning" @click="gotoNext">返回</Button>
  </div>
  <MyFooter />
  </div>
</template>

<script>
  import MyHeader from '../../../components/MyHeader.vue'
  import MyFooter from '../../../components/MyFooter.vue'
  import request from '../../../utils/request'
  import dictutil from '../../../assets/js/dictutil'
  import validator from '../../../utils/validatorUtil.js'
  import MobileSelect from 'mobile-select'
  export default {
    data() {
      return {
        validator,
        options3: {
              disabledDate(date) {
                  return date && date.valueOf() < Date.now() - 86400000
              }
          },
        dom0: '',
        mobileSelect3: {},
        form: {},
        stagespay: {},
        stagespayList: [],
        doms: [],
        citys: [],
        conForms: [],
        blictypes: [],
        nations: []
      }
    },
    components: {
      MyHeader,
      MyFooter
    },
    methods: {
      invDetail() {
        request.get('/interface/apply/cp/setup/invDetail.do', {invid: this.$route.query.invid}
        ).then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
          } else if (response.data.result === 'success') {
            let dataDetail = response.data.data
            this.form = dataDetail.investorForm
            this.form.nation = this.form.nation || '01'
            this.dom0 = (this.form.dom ? this.form.dom.substring(0, this.form.dom.length - this.form.domother.length) : '')
            for (let i = 0; i < dataDetail.stagespayList.length; i++) {
              if (dataDetail.stagespayList[i].condate instanceof String) {
                break
              }
              let date = new Date(dataDetail.stagespayList[i].condate)
              let Y = date.getFullYear()
              let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
              let D = (date.getDate() + 1 < 10 ? '0' + (date.getDate() + 1) : date.getDate() + 1)
              dataDetail.stagespayList[i].condate = Y + '-' + M + '-' + D
            }
            this.stagespayList = dataDetail.stagespayList
          }
        })
      },
      add(name) {
        if (!this.stagespay.cursubconam) {
          this.$ErrorAlert('出资额不能为空')
          return
        }
        if (!this.stagespay.conform) {
          this.$ErrorAlert('出资方式不能为空')
          return
        }
        if (!this.stagespay.condate) {
          this.$ErrorAlert('出资日期不能为空')
          return
        }
        let time = this.stagespay.condate
        let year = time.getFullYear()
        let month = (time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1)
        let day = (time.getDate() + 1 < 10 ? '0' + (time.getDate() + 1) : time.getDate() + 1)
        this.stagespayList.unshift({
          condate: year + '-' + month + '-' + day,
          conform: this.stagespay.conform,
          cursubconam: this.stagespay.cursubconam
        })
        this.stagespay.cursubconam = ''
      },
      del(index) {
        this.stagespayList.splice(index, 1)
      },
      save(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            if (this.stagespayList.length === 0) {
              this.$ErrorAlert('出资情况不能为空')
              return false
            }
            this.form.dom = this.dom0 + this.form.domother
            let postData = new FormData()
            this.form.certype = '10'
            this.form.country = '156'
            this.form.personsign = '1'
            postData.append('investorForm', JSON.stringify(this.form))
            postData.append('stagespayList', JSON.stringify(this.stagespayList))
            request.post('/interface/apply/cp/setup/upadteInv.do', postData
              ).then(response => {
                if (response.data.result === 'error') {
                  this.$ErrorAlert(response.data.message)
                } else if (response.data.result === 'success') {
                  this.$SuccessAlert('保存成功')
                  this.$router.push({ name: 'InvestorList' })
                }
              })
          } else {
            this.$ErrorAlert('数据未填写完全，请注意红色标记')
          }
        })
      },
      gotoNext() {
        this.$router.go(-1)
      },
      getprolocother() {
        this.citys = dictutil.getList('city')
        this.conForms = dictutil.getList('CA22')
        this.blictypes = dictutil.getList('CA50')
        this.nations = dictutil.getList('CB32')
      },
      domSelectInit() {
        let that = this
        this.mobileSelect3 = new MobileSelect({
          trigger: '#trigger3',
          title: '单项选择',
          wheels: [
            {data: that.citys}
          ],
          keyMap: {
            id: 'value',
            value: 'text',
            childs: 'child'
          },
          callback: function(indexArr, data) {
            if (data[0].text === data[1].text) {
              that.dom0 = data[0].text + data[2].text
            } else {
              that.dom0 = data[0].text + data[1].text + data[2].text
            }
            that.form.domcity = data[1].value
            that.form.domcounty = data[2].value
            that.form.domprov = data[0].value
          }
        })
      },
      nationSelectInit() {
        let that = this
        let mobileSelect4 = new MobileSelect({
          trigger: '#trigger4',
          title: '单项选择',
          wheels: [
            {data: that.nations}
          ],
          keyMap: {
            id: 'value',
            value: 'text'
          },
          callback: function(indexArr, data) {
            that.form.nation = data[0].value
          }
        })
        return mobileSelect4
      },
      conFormSelectInit() {
        let that = this
        let mobileSelect5 = new MobileSelect({
          trigger: '#trigger5',
          title: '单项选择',
          wheels: [
            {data: that.conForms}
          ],
          keyMap: {
            id: 'value',
            value: 'text'
          },
          callback: function(indexArr, data) {
            that.stagespay.conform = data[0].value
          }
        })
        return mobileSelect5
      }
    },
     mounted() {
      this.invDetail()
      this.getprolocother()
      this.nationSelectInit()
      this.conFormSelectInit()
      this.domSelectInit()
    }
  }

</script>

<style lang="scss">
  .natural {
    height: 100%;
    background: #f3f3f3;
    form {
      background: #fff;
      .ivu-row {
        padding: 0 0.54rem;
        height: 1.75rem;
        line-height: 1.75rem;
        color: #00b3ff;
        border-bottom: 1px solid #dedede;
      }
      .conam{
        width: 100%;
        .ivu-input-wrapper{
          width: 85%;
          float: left;
        }
        span{
          width: 15%;
          float: right;
          line-height: 1.75rem;
        }
      }
      .dom{
        height: 3.5rem;
        label {
          height: 3.5rem;
          font-size: 0.57rem;
          line-height: 3.5rem !important;
          padding: 0 0 0 0.54rem;
        }
      }
      .ivu-form-item {
        margin-bottom: 0;
        border-bottom: 1px solid #dedede;
        .selectDiv {
          border: 1px solid #dddee1;
        }
        .ivu-form-item-content{
          text-align: right;
          height: 1.75rem;
          font-size: 0.57rem;
          line-height: 1.75rem;
        }
        label {
          height: 1.75rem;
          font-size: 0.57rem;
          line-height: 1.75rem;
          padding: 0 0 0 0.54rem;
        }
        .ivu-select{
          text-align: right;
        }
        input {
          height: 1.75rem;
          font-size: 0.57rem;
          border-top: none;
          border-bottom: none;
          border-right: none;
          border-radius: 0;
          text-align: right;
          &:hover {
            border: none;
          }
          &:focus {
            border: none;
            box-shadow: none;
          }
          &::-webkit-input-placeholder {
            text-align: right;
          }
          &::-moz-placeholder {
            text-align: right;
          }
          &:-ms-input-placeholder {
            text-align: right;
          }
        }
        .ivu-date-picker {
          width: 100%;
          float: right;
           .ivu-input-icon-normal {
             line-height: 1.75rem;
           }
        }
        .ivu-select-selection{
          border: none;
          outline: none;
        }
        .ivu-select{
          width: 100%;
          height: 1.75rem;
          float: right;
          .ivu-select-selection{
            height: 1.75rem;
            line-height: 1.75rem;
            .ivu-select-placeholder{
              height: 1.75rem;
              line-height: 1.75rem;
            }
            .ivu-select-selected-value{
              height: 1.75rem;
              line-height: 1.75rem;
            }
          }
        }
      }
    }
    &_space {
      height: 0.54rem;
      background: #f3f3f3;
    }
    &_person {
      &-select {
        .ivu-form-item-content {
          height: 1.75rem;
          float: none;
          text-align: right;
          font-size: 0.57rem;
          line-height: 1.75rem;
          padding-left: 0.54rem;
          .ivu-select-selection {
            border: none;
            box-shadow: none;
            .ivu-select-selected-value {
              font-size: 0.57rem;
              padding-left: 0;
            }
          }
        }
      }
    }
    &_add {
      padding: 0.54rem;
      background: #f3f3f3;
      button {
        display: block;
        margin: 0 auto;
      }
    }
    &_fund {
      display: flex;
      padding: 0.54rem 0.5rem;
      justify-content: space-between;
      border-top: 1px solid #ccc;
      &:last-child {
        border-bottom: 1px solid #ccc;
      }
      button {
        font-size: 0.57rem;
        padding: 0.36rem 1rem;
      }
      >div {
        p {
          span {
            color: #00b3ff;
            margin-right: 0.32rem;
          }
          em {
            color: red;
          }
          &:last-child {
            font-size: 0.43rem;
          }
        }
      }
    }
  }
.bottom {
    display: flex;
    justify-content: space-around;
    // padding: 0.54rem;
    button {
      width: 45%;
      padding-top: 0.36rem;
      padding-bottom: 0.36rem;
      font-size: 0.57rem;
    }
  }
</style>
